<template>
    <div>
        <a href="#" @click="tz">添加食谱</a>
        <a href="#" @click="kf">康复治疗显示</a>
        菜谱标题<input type="text" v-model="p.name">
        类别<select v-model="p.type">
                        <option value="">请选择</option>
                        <option value="早餐">早餐</option>
                        <option value="午餐">午餐</option>
                        <option value="晚餐">晚餐</option>
                    </select>
                    <input type="button" value="查询" @click="show()">
        <table class="table" border="1">
            <thead>
                <tr>
                    <td>id</td>
                    <td>菜谱标题</td>
                    <td>类别</td>
                    <td>图片</td>
                    <td>时间</td>
                </tr>
            </thead>
            <tbody v-for="item in info">
                <tr>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.type}}</td>
                    <td><img :src="item.img" style="height: 100px; width: 100px;"></td>
                    <td>{{item.date.substring(0,10)}}</td>
                </tr>
            </tbody>
        </table>
        <span>共有{{ p.count }}条数据，一共有{{ p.pcount }}页，当前第{{ p.index }}页，当前页{{ p.size }}条</span>
        <select @change="ym" v-model="p.ys">
            <option value="2">2</option>
            <option value="4">4</option>
            <option value="6">6</option>
            <option value="8">8</option>
        </select>

        <a href="#" @click="page('a')">首页</a>
        <a href="#" @click="page('b')">上一页</a>
        <a href="#" @click="page('c')">下一页</a>
        <a href="#" @click="page('d')">尾页</a>
    </div>
</template>

<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import { useRouter } from 'vue-router';

    const router=useRouter();

const info=ref([{
  "id": 0,
  "name": "",
  "type": "",
  "img": "",
  "date": ""
}])
const kf=()=>{
    router.push('kfshow');
}
const ym=()=>{
    p.value.size=p.value.ys;
    show();
}
const tz=()=>{
    router.push('spadd');
}

const page=(v:string)=>{
    if(v=='a'){
        p.value.index=1;
    }
    if(v=='b'){
        if(p.value.index>1){
            p.value.index-=1;
        }
        
    }
    if(v=='c'){
        if(p.value.index<p.value.pcount){
            p.value.index+=1;
        }
    }
    if(v=='d'){
        p.value.index=p.value.pcount;
    }
    show();
}



onMounted(()=>{
    show();
})
const p=ref({
    index:1,
    size:2,
    count:0,
    pcount:0,
    name:"",
    type:"",
    ys:2
})



const show=()=>{

    axios.get("https://localhost:7041/api/sp/getsp",{params:p.value}).then(res=>{
    info.value=res.data.data;

    p.value.count=res.data.count;
    p.value.pcount=Math.ceil(p.value.count/p.value.size);
})
}



</script>

